<template>
    <el-dialog title="成员列表" append-to-body :visible.sync="isShow" v-if="isShow" top="10vh" width="600px" :close-on-click-modal="false">
        <div class="txlS border" style="height: 30px; padding: 5px 0; display: flex; width: 100%">
            <div
                class="pointer"
                style="display: flex; width: 80px; border-radius: 4px; height: 30px; margin: 0 5px; background-color: rgba(255, 255, 255, 0.2); justify-content: space-around"
                v-for="item in selectList"
                :key="item"
            >
                <div class="text">{{ item }}</div>
                <div style="font-size: 30px" class="text" @click="del(item)">×</div>
            </div>
        </div>
        <div class="txlS border" style="height: 450px; display: flex; margin-top: 10px">
            <div style="width: 260px; padding-left: 8px; padding-top: 8px; border-right: 1px solid rgba(73, 197, 251, 0.3)">
                <el-tabs type="card" v-model="activeName" @tab-click="handleClick">
                    <el-tab-pane class="sel" label="部门" name="department">
                        <div style="height: 392px; padding: 0 10px; overflow-y: auto">
                            <div :class="select.id === -1 ? 'active text cursor' : 'text cursor'" @click="change({ id: -1, name: '全公司' })">全公司</div>
                            <div :class="select.id === item.id ? 'active text cursor' : 'text cursor'" @click="change(item)" v-for="item in departmentList" :key="item.id">
                                {{ item.name }}
                            </div>
                            <div :class="select.id === 0 ? 'active text cursor' : 'text cursor'" @click="change({ id: 0, name: '待分配' })">待分配</div>
                        </div>
                    </el-tab-pane>
                    <el-tab-pane class="sel" label="角色" name="role">
                        <div style="height: 392px; padding: 0 10px; overflow-y: auto">
                            <div :class="select.id === item.id ? 'active text cursor' : 'text cursor'" @click="change(item)" v-for="item in roleList" :key="item.id">
                                {{ item.name }}
                            </div>
                        </div>
                    </el-tab-pane>
                </el-tabs>
            </div>
            <div style="flex: 1; height: 100%">
                <div style="margin-top: 8px; padding: 0 8px">
                    <el-select filterable @change="(e) => add(e)" placeholder="搜索成员">
                        <el-option v-for="i in allList" :key="i.id" :label="i.nick_name" :value="i"></el-option>
                    </el-select>
                </div>
                <div style="height: calc(100% - 58px); margin-top: 9px; overflow-y: auto">
                    <div @click="add(item)" class="cursor" v-for="item in userList" :key="item.id" style="display: flex; height: 30px; padding: 0 20px">
                        <div class="text" style="flex: 1">{{ item.nick_name }}</div>
                        <div style="width: 22px">
                            <img style="height: 22px; width: 22px; margin-top: 4px" :src="require(`@/assets/iconfont/${selectList.findIndex((i) => i === item.nick_name) === -1 ? 'wxz' : 'xz'}.png`)" alt="" />
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div style="margin-top: 10px; display: flex; justify-content: right">
            <el-button @click="() => (this.isShow = false)">取消</el-button>
            <el-button type="primary" @click="onSubmit">确定</el-button>
        </div>
    </el-dialog>
</template>

<script>
import { requestApi } from '@/requset/api'
import zyTable from '@/components/common/zyTable.vue'
export default {
    components: {
        zyTable,
    },
    data() {
        return {
            single: true,
            isShow: false,
            activeName: 'department',
            userList: [],
            roleList: [],
            select: {
                id: -1,
                name: '全公司',
            },
            loading: false,
            queryForm: {
                size: 9999,
                page: 1,
            },
            total: 0,
            name: '',
            departmentList: [],
            selectList: [],
            allList: [],
        }
    },
    methods: {
        del(item) {
            this.selectList.splice(
                this.selectList.findIndex((i) => i === item.nick_name),
                1,
            )
        },
        add(item) {
            if (this.single) {
                this.selectList = [item.nick_name]
            } else {
                let index = this.selectList.findIndex((i) => i === item.nick_name)
                if (index === -1) {
                    if (this.selectList.length < 6) {
                        this.selectList.push(item.nick_name)
                    }
                } else {
                    this.selectList.splice(index, 1)
                }
            }
        },
        doOpen(selectList, name, single = true) {
            this.single = single
            this.isShow = true
            this.select = {
                id: -1,
                name: '全公司',
            }
            this.selectList = selectList
            this.name = name
            this.activeName = 'department'
            this.getlist()
        },
        getlist() {
            Promise.all([requestApi('post', `txl/role`), requestApi('post', `txl/department`)]).then((res) => {
                this.roleList = res[0].data.data
                this.departmentList = res[1].data.data.reverse()
                this.getuser()
            })
        },
        getuser() {
            this.loading = true
            requestApi('post', `txl/user`, Object.assign(this.queryForm, { id: this.select.id, type: this.activeName })).then((res) => {
                this.userList = res.data.data.data
                if (this.select.id === -1) {
                    this.allList = res.data.data.data
                    this.userList.sort((a, b) => {
                        if (a.nick_name === sessionStorage.getItem('nick_name')) return -1
                        if (b.nick_name === sessionStorage.getItem('nick_name')) return 1
                        return 0
                    })
                }
                this.total = res.data.data.total
                this.loading = false
            })
        },
        change(item) {
            this.select = item
            this.getuser()
        },
        handleClick() {
            this.select =
                this.activeName === 'role'
                    ? this.roleList[0]
                    : {
                          id: -1,
                          name: '全公司',
                      }
            this.getuser()
        },
        onSubmit() {
            this.$emit('setTxl', { list: this.selectList, name: this.name })
            this.isShow = false
        },
    },
    created() {},
}
</script>

<style lang="less">
.border {
    border: 1px solid rgba(73, 197, 251, 0.3);
    border-radius: 2px;
    overflow-x: auto;
}
.txlS {
    .cursor:hover {
        background-color: rgba(255, 255, 255, 0.2);
    }

    .active {
        color: #409eff !important;
    }
    .text {
        height: 30px;
        line-height: 30px;
        font-size: 16px;
        color: #b2e3ff;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    .el-tabs__item {
        background-color: #0a3273;
        background-image: none !important;
        height: 40px;
        line-height: 40px;
        width: 125px !important;
        color: #007bff;
        font-size: 13px !important;
    }

    .el-tabs--card > .el-tabs__header .el-tabs__item.is-active {
        color: white !important;
        background-color: #007bff !important;
    }

    .eidtItem {
        width: 80%;
        margin-left: 10%;
        margin-bottom: 10px;
        display: flex;
        justify-content: space-between;
        position: relative;

        .el-input {
            width: 40%;
        }

        i {
            font-size: 30px;
            color: aqua;
            position: absolute;

            cursor: pointer;
        }

        .el-icon-plus {
            right: -32px;
            top: 4px;
        }

        .el-icon-minus {
            left: -32px;
            top: 4px;
        }
    }
}
</style>
